<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			position: absolute;
			top: 0; left: 0;
			width: 100px;
			height: 100px;
			background-color: #58a;
		}
	</style>
</head>
<body>
	<div></div>
	<script>
		var oDiv = document.querySelector('div');
		document.onkeydown = function (ev) {
			var ev = ev || event;
			switch (ev.keyCode) {
				case 38:
					oDiv.style.top = oDiv.offsetTop - 10 + 'px';
					break;
				case 39:
					oDiv.style.left = oDiv.offsetLeft +10 + 'px';
					break;
				case 40:
					oDiv.style.top = oDiv.offsetTop + 10 + 'px';
					break;
				case 37:
					oDiv.style.left = oDiv.offsetLeft - 10 + 'px';
					break;
			}
		}
	</script>
</body>
</html>